<template>
  <view class="top-call_center">
    <view class="public-content">
      <top-nav-bar background-color="transparent" />
      <view class="public-title">
        {{ $t('question.title') }}
      </view>
      <view class="public-desc">
        {{ $t('question.title1') }}
      </view>
      <view class="cark-box">
        <view
          v-for="(item, index) in list"
          :key="index"
          class="row-item"
          @click="onGo(item)">
          <view class="name">{{ item.articleTitle }}</view>
          <uni-icons
            type="forward"
            color="#666666"
            size="16"></uni-icons>
        </view>
      </view>
      <view class="bottom-btn">
        <view style="padding: 0 32rpx">
          <button
            type="primary"
            @click="onOpenChat()">
            {{ $t('service.title') }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  import { getArticle } from '@/api'
  import { useChat } from '@/hooks/useChat'

  const { onOpenChat } = useChat()

  const onGo = (item) => {
    uni.navigateTo({
      url: `/pages/details-index/details-index?articleId=${item.articleId}`
    })
  }

  const list = ref([])
  onLoad(async () => {
    list.value = await getArticle('Customer_Problem')
  })
</script>

<style lang="scss" scoped>
  .top-call_center {
    background: url('/static/bg/bg-top.png') no-repeat top center, #e2ecf8;
    background-size: 100%;
  }
  .public-content {
    height: 100vh;
  }
  .public-title {
    margin: 76rpx 0 0;
  }

  .cark-box {
    width: 100%;
    background: #fff;
    border-radius: 16rpx;
    .row-item + .row-item {
      border-top: 2rpx solid #e2ecf8;
    }
    .row-item {
      padding: 32rpx 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #666666;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }

  .bottom-btn {
    width: 100%;
    height: 150rpx;
    padding-top: 40rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #e2ecf8;
    button {
      height: 100rpx;
      line-height: 100rpx;
      background: #3462fe;
      border-radius: 64rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #ffffff;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
</style>
